<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能瓷砖监控平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: 14px;
            font-weight: 400;
            background-color: #F5F5F5;
            color: rgba(0, 0, 0, 0.88);
            line-height: 1.5;
        }

        .container {
            width: 1440px;
            margin: 0 auto;
            background: #F5F5F5;
        }

        /* 顶部导航栏 */
        .header {
            background: #FFFFFF;
            box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            padding: 0 24px;
            height: 64px;
            gap: 16px;
        }

        .logo {
            font-size: 18px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.88);
            width: 144px;
        }

        .nav-menu {
            display: flex;
            gap: 16px;
            margin-left: 294px;
        }

        .nav-item {
            padding: 0 16px;
            height: 64px;
            display: flex;
            align-items: center;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.88);
            cursor: pointer;
            position: relative;
        }

        .nav-item.active {
            color: #1677FF;
        }

        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 28px;
            height: 2px;
            background: #1677FF;
        }

        .header-right {
            margin-left: auto;
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .search-box {
            display: flex;
            align-items: center;
            background: #FFFFFF;
            border: 1px solid #D9D9D9;
            border-radius: 6px;
            padding: 5px 13px;
            width: 192px;
            gap: 4px;
        }

        .search-icon {
            width: 14px;
            height: 14px;
            background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472fc950-a0fa19bc-1366-47ad-95c9-231a6bf0704d.svg');
            background-size: cover;
        }

        .search-input {
            border: none;
            outline: none;
            flex: 1;
            color: rgba(0, 0, 0, 0.25);
            font-family: 'Arial';
        }

        .icon-button {
            width: 32px;
            height: 32px;
            border: 1px solid #D9D9D9;
            border-radius: 16px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
        }

        .icon-button.notification::after {
            content: '';
            position: absolute;
            top: -3px;
            right: 5px;
            width: 8px;
            height: 8px;
            background: #FF4D4F;
            border-radius: 50%;
        }

        .icon-button.profile {
            background: rgba(0, 0, 0, 0.25);
        }

        /* 主要内容区域 */
        .main-content {
            display: flex;
            gap: 24px;
            padding: 0 24px 0 0;
        }

        /* 侧边栏 */
        .sidebar {
            width: 220px;
            background: #FFFFFF;
            border-right: 1px solid #E5E7EB;
            min-height: calc(100vh - 64px);
        }

        .sidebar-header {
            padding: 16px;
            border-bottom: 1px solid #E5E7EB;
            font-size: 16px;
            font-weight: 600;
        }

        .sidebar-menu {
            padding: 8px 4px;
        }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 24px;
            margin: 0 4px;
            border-radius: 8px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.88);
        }

        .menu-item.active {
            background: #E6F4FF;
            color: #1677FF;
        }

        .menu-icon {
            width: 14px;
            height: 14px;
            background-size: cover;
        }

        .submenu {
            margin-left: 28px;
            margin-top: 5px;
        }

        .submenu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 0;
            color: rgba(0, 0, 0, 0.88);
            cursor: pointer;
        }

        /* 内容区域 */
        .content {
            flex: 1;
            padding: 24px 0;
        }

        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            padding: 26px;
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .stat-title {
            color: #6B7280;
            font-size: 14px;
        }

        .stat-icon {
            width: 24px;
            height: 24px;
            background-size: cover;
            position: relative;
        }

        .stat-trend {
            position: absolute;
            top: -12px;
            right: -5px;
            font-size: 12px;
            line-height: 16px;
        }

        .stat-trend.positive {
            color: #52C41A;
        }

        .stat-trend.negative {
            color: #FF4D4F;
        }

        .stat-value {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .stat-number {
            font-size: 24px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.88);
        }

        .stat-unit {
            color: #6B7280;
            font-size: 14px;
        }

        /* 压力分布地图 */
        .pressure-map {
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            margin-bottom: 24px;
        }

        .map-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            border-bottom: 1px solid #F0F0F0;
        }

        .map-title {
            font-size: 16px;
            font-weight: 600;
        }

        .map-controls {
            display: flex;
            gap: 16px;
        }

        .toggle-button {
            display: flex;
            border: 1px solid #D9D9D9;
            border-radius: 6px;
            overflow: hidden;
        }

        .toggle-option {
            padding: 5px 16px;
            cursor: pointer;
            background: #FFFFFF;
            color: rgba(0, 0, 0, 0.88);
        }

        .toggle-option.active {
            background: #1677FF;
            color: #FFFFFF;
        }

        .dropdown {
            display: flex;
            align-items: center;
            gap: 27px;
            padding: 2px 13px;
            border: 1px solid #D9D9D9;
            border-radius: 6px;
            cursor: pointer;
        }

        .map-content {
            padding: 28px 29px;
        }

        .grid-container {
            display: grid;
            gap: 4px;
        }

        .grid-labels-x {
            display: flex;
            gap: 98px;
            margin-left: 36px;
            margin-bottom: 4px;
        }

        .grid-label {
            color: #6B7280;
            font-size: 14px;
            width: 18px;
        }

        .grid-row {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .grid-label-y {
            color: #6B7280;
            font-size: 14px;
            width: 18px;
            margin-right: 14px;
        }

        .grid-cell {
            width: 100px;
            height: 28px;
            border: 1px solid #E5E7EB;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            font-weight: 500;
            font-size: 14px;
        }

        .grid-cell.normal {
            background: rgba(82, 196, 26, 0.60);
        }

        .grid-cell.warning {
            background: rgba(250, 173, 20, 0.70);
        }

        .grid-cell.danger {
            background: rgba(255, 77, 79, 0.90);
        }

        .legend {
            display: flex;
            gap: 16px;
            margin-top: 49px;
            justify-content: center;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4B5563;
        }

        /* 底部区域 */
        .bottom-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .chart-card {
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
        }

        .chart-header {
            padding: 12px 24px;
            border-bottom: 1px solid #F0F0F0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chart-title {
            font-size: 16px;
            font-weight: 600;
        }

        .chart-tabs {
            display: flex;
            gap: 32px;
        }

        .chart-tab {
            color: rgba(0, 0, 0, 0.88);
            cursor: pointer;
            padding-bottom: 5px;
        }

        .chart-tab.active {
            color: #1677FF;
            text-shadow: 0px 0px 0.25px #1677FF;
            border-bottom: 2px solid #1677FF;
        }

        .chart-content {
            padding: 20px 24px;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chart-placeholder {
            width: 100%;
            height: 100%;
            background: #f8f9fa;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
        }

        /* 表格样式 */
        .table-container {
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
        }

        .table-header {
            padding: 12px 24px;
            border-bottom: 1px solid #F0F0F0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-title {
            font-size: 16px;
            font-weight: 600;
        }

        .view-all {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #1677FF;
            cursor: pointer;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background: #FAFAFA;
            padding: 8px;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid #F0F0F0;
        }

        .table td {
            padding: 9px 8px;
            border-bottom: 1px solid #F0F0F0;
        }

        .status-badge {
            padding: 1px 7px;
            border-radius: 4px;
            color: #FFFFFF;
            font-size: 12px;
            text-align: center;
        }

        .status-danger {
            background: #FF4D4F;
        }

        .status-warning {
            background: #FAAD14;
        }

        .link {
            color: #1677FF;
            cursor: pointer;
        }

        /* 底部状态栏 */
        .status-bar {
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            padding: 26px;
        }

        .status-info {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }

        .status-item {
            display: flex;
            gap: 4px;
        }

        .status-label {
            color: rgba(0, 0, 0, 0.45);
        }

        .status-value {
            color: rgba(0, 0, 0, 0.88);
        }

        .status-value.success {
            color: #52C41A;
        }

        .action-buttons {
            display: flex;
            gap: 16px;
        }

        .action-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 17px;
            background: #FFFFFF;
            border: 1px solid #D9D9D9;
            border-radius: 6px;
            box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
            cursor: pointer;
            color: #000000;
            font-family: 'Arial';
        }

        .button-icon {
            width: 14px;
            height: 14px;
            background-size: cover;
        }

        /* 系统状态摘要 */
        .system-summary {
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            padding: 2px;
        }

        .summary-header {
            padding: 12px 24px;
            border-bottom: 1px solid #F0F0F0;
            font-size: 16px;
            font-weight: 600;
        }

        .health-score {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .score-circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: conic-gradient(#52C41A 0deg 306deg, #E5E7EB 306deg 360deg);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .score-circle::before {
            content: '';
            width: 140px;
            height: 140px;
            background: #FFFFFF;
            border-radius: 50%;
            position: absolute;
        }

        .score-text {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .score-number {
            font-size: 30px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.88);
        }

        .score-label {
            color: #6B7280;
            font-size: 14px;
            margin-top: 4px;
        }

        .status-legend {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin: 20px 0;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .legend-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }

        .legend-dot.normal {
            background: #52C41A;
        }

        .legend-dot.warning {
            background: #FAAD14;
        }

        .legend-dot.danger {
            background: #FF4D4F;
        }

        .maintenance-tip {
            text-align: center;
            margin-top: 26px;
            color: rgba(0, 0, 0, 0.45);
        }

        .maintenance-tip .highlight {
            color: rgba(0, 0, 0, 0.88);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="logo">智能瓷砖监控平台</div>
            <nav class="nav-menu">
                <div class="nav-item active">概览</div>
                <div class="nav-item">数据监控</div>
                <div class="nav-item">报警管理</div>
                <div class="nav-item">系统设置</div>
            </nav>
            <div class="header-right">
                <div class="search-box">
                    <div class="search-icon"></div>
                    <input type="text" class="search-input" placeholder="搜索...">
                </div>
                <div class="icon-button notification">
                    <div style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472fb949-99f7c16d-3019-4079-af13-ef1a4161f72e.svg'); width: 14px; height: 14px; background-size: cover;"></div>
                </div>
                <div class="icon-button">
                    <div style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f2f93-01265d96-e0c3-42aa-bc7f-e0a1615a93cc.svg'); width: 14px; height: 14px; background-size: cover;"></div>
                </div>
                <div class="icon-button profile">
                    <div style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f4a12-c0ab8d7e-b257-483d-8aff-754b09df2e7f.svg'); width: 14px; height: 14px; background-size: cover;"></div>
                </div>
            </div>
        </header>

        <div class="main-content">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="sidebar-header">概览</div>
                <div class="sidebar-menu">
                    <div class="menu-item active">
                        <div class="menu-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f31a7-6ac60147-1b8a-4b04-a06b-edb3793606dc.svg');"></div>
                        <span>系统概况</span>
                    </div>
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="menu-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f2fda-a154c9cf-11d3-45ce-a88b-1de9d9a3feaf.svg');"></div>
                            <span>实时状态</span>
                        </div>
                        <div class="submenu-item">
                            <div class="menu-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f3404-24652456-71ab-49cf-93d8-d08e727027b8.svg');"></div>
                            <span>异常统计</span>
                        </div>
                        <div class="submenu-item">
                            <div class="menu-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472ffef4-7e10b988-e326-4427-8c38-cdcd65841ad8.svg');"></div>
                            <span>历史回溯</span>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 主要内容 -->
            <main class="content">
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-title">在线瓷砖数</div>
                            <div class="stat-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f84a5-755d7925-4bf5-432a-ae74-e8f77f571672.svg');">
                                <div class="stat-trend positive">3%</div>
                            </div>
                        </div>
                        <div class="stat-value">
                            <div class="stat-number">186</div>
                            <div class="stat-unit">块</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-title">异常信号</div>
                            <div class="stat-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f9238-8e5a60dd-73f0-4725-9544-4619c8f1b25c.svg');">
                                <div class="stat-trend negative">2%</div>
                            </div>
                        </div>
                        <div class="stat-value">
                            <div class="stat-number">3</div>
                            <div class="stat-unit">处</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-title">平均压力值</div>
                            <div class="stat-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472fe131-5e7e95be-3e50-45ba-89a7-852ef250ff96.svg');">
                                <div class="stat-trend negative">4%</div>
                            </div>
                        </div>
                        <div class="stat-value">
                            <div class="stat-number">2.8</div>
                            <div class="stat-unit">kPa</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <div class="stat-title">今日信号总量</div>
                            <div class="stat-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f8180-904b3179-e5d1-4487-b74f-e397756f9b8b.svg');">
                                <div class="stat-trend positive">2%</div>
                            </div>
                        </div>
                        <div class="stat-value">
                            <div class="stat-number">24,568</div>
                            <div class="stat-unit">个</div>
                        </div>
                    </div>
                </div>

                <!-- 压力分布地图 -->
                <div class="pressure-map">
                    <div class="map-header">
                        <div class="map-title">压力分布地图</div>
                        <div class="map-controls">
                            <div class="toggle-button">
                                <div class="toggle-option active">2D</div>
                                <div class="toggle-option">3D</div>
                            </div>
                            <div class="dropdown">
                                <span>全部区域</span>
                                <div style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/1991915472f0da5-0f36954e-77dc-413e-a2a6-2681b78666a9.svg'); width: 12px; height: 12px; background-size: cover;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="map-content">
                        <!-- X轴标签 -->
                        <div class="grid-labels-x">
                            <div class="grid-label">X1</div>
                            <div class="grid-label">X2</div>
                            <div class="grid-label">X3</div>
                            <div class="grid-label">X4</div>
                            <div class="grid-label">X5</div>
                            <div class="grid-label">X6</div>
                            <div class="grid-label">X7</div>
                            <div class="grid-label">X8</div>
                            <div class="grid-label">X9</div>
                            <div class="grid-label">X10</div>
                        </div>
                        
                        <!-- 网格数据 -->
                        <div class="grid-row">
                            <div class="grid-label-y">Y1</div>
                            <div class="grid-cell normal">5.1</div>
                            <div class="grid-cell warning">5.3</div>
                            <div class="grid-cell warning">5.1</div>
                            <div class="grid-cell warning">5.8</div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y2</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y3</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell warning">5.2</div>
                            <div class="grid-cell danger">6.2</div>
                            <div class="grid-cell danger">6.1</div>
                            <div class="grid-cell danger">6.5</div>
                            <div class="grid-cell danger"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y4</div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell danger">5.8</div>
                            <div class="grid-cell danger">6.8</div>
                            <div class="grid-cell danger">6.9</div>
                            <div class="grid-cell danger">7.6</div>
                            <div class="grid-cell warning">6.1</div>
                            <div class="grid-cell normal">5.7</div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y5</div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell danger">6.6</div>
                            <div class="grid-cell danger">7.5</div>
                            <div class="grid-cell danger">7.7</div>
                            <div class="grid-cell danger">7.5</div>
                            <div class="grid-cell danger">6.4</div>
                            <div class="grid-cell danger">5.9</div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y6</div>
                            <div class="grid-cell warning">5.1</div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell danger">6.3</div>
                            <div class="grid-cell danger">7.3</div>
                            <div class="grid-cell danger">7.5</div>
                            <div class="grid-cell danger">7.2</div>
                            <div class="grid-cell danger">6.7</div>
                            <div class="grid-cell warning">5.7</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y7</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell warning">5.4</div>
                            <div class="grid-cell warning">5.1</div>
                            <div class="grid-cell danger">6.3</div>
                            <div class="grid-cell danger">7.1</div>
                            <div class="grid-cell danger">6.5</div>
                            <div class="grid-cell danger">6.2</div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y8</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y9</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell warning"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal">5.1</div>
                        </div>
                        
                        <div class="grid-row">
                            <div class="grid-label-y">Y10</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell warning">5.9</div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal"></div>
                            <div class="grid-cell normal">5.2</div>
                        </div>
                        
                        <!-- 图例 -->
                        <div class="legend">
                            <div class="legend-item">0kPa</div>
                            <div class="legend-item">4kPa</div>
                            <div class="legend-item">8kPa</div>
                        </div>
                    </div>
                </div>

                <!-- 底部区域 -->
                <div class="bottom-section">
                    <!-- 系统状态摘要 -->
                    <div class="system-summary">
                        <div class="summary-header">系统状态摘要</div>
                        <div class="health-score">
                            <div class="score-circle">
                                <div class="score-text">
                                    <div class="score-number">85%</div>
                                    <div class="score-label">健康评分</div>
                                </div>
                            </div>
                            <div class="status-legend">
                                <div class="legend-item">
                                    <div class="legend-dot normal"></div>
                                    <span style="color: #52C41A;">正常</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-dot warning"></div>
                                    <span style="color: #FAAD14;">注意</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-dot danger"></div>
                                    <span style="color: #FF4D4F;">异常</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 实时趋势图 -->
                    <div class="chart-card">
                        <div class="chart-header">
                            <div class="chart-title">实时趋势图</div>
                            <div class="chart-tabs">
                                <div class="chart-tab active">今日</div>
                                <div class="chart-tab">昨日</div>
                                <div class="chart-tab">本周</div>
                                <div class="chart-tab">本月</div>
                            </div>
                        </div>
                        <div class="chart-content">
                            <div class="chart-placeholder">
                                <img src="https://miaoduo.fbcontent.cn/private/resource/image/199191547302517-549296b3-6a97-47e1-add3-8d5cf0e26f3f.svg" alt="趋势图" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 维护建议 -->
                <div class="maintenance-tip">
                    <span>维护建议：</span><span class="highlight">系统运行良好，暂无需要维护</span>
                </div>

                <!-- 最近异常列表和区域对比分析 -->
                <div class="bottom-section">
                    <!-- 最近异常列表 -->
                    <div class="table-container">
                        <div class="table-header">
                            <div class="table-title">最近异常列表</div>
                            <div class="view-all">
                                <span>查看全部</span>
                                <div style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/19919154730c27f-63a92abe-f1af-479c-9c86-37a037401403.svg'); width: 14px; height: 14px; background-size: cover;"></div>
                            </div>
                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>位置</th>
                                    <th>压力值 (kPa)</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2023-11-28 14:23:45</td>
                                    <td>区域A-2-3</td>
                                    <td><strong>6.72</strong></td>
                                    <td><span class="status-badge status-danger">严重异常</span></td>
                                    <td><span class="link">查看详情</span></td>
                                </tr>
                                <tr>
                                    <td>2023-11-28 14:15:12</td>
                                    <td>区域B-1-5</td>
                                    <td><strong>5.89</strong></td>
                                    <td><span class="status-badge status-warning">轻微异常</span></td>
                                    <td><span class="link">查看详情</span></td>
                                </tr>
                                <tr>
                                    <td>2023-11-28 14:08:30</td>
                                    <td>区域A-3-7</td>
                                    <td><strong>6.54</strong></td>
                                    <td><span class="status-badge status-danger">严重异常</span></td>
                                    <td><span class="link">查看详情</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 区域对比分析 -->
                    <div class="chart-card">
                        <div class="chart-header">
                            <div class="chart-title">区域对比分析</div>
                        </div>
                        <div class="chart-content">
                            <div class="chart-placeholder">
                                <img src="https://miaoduo.fbcontent.cn/private/resource/image/1991915473084f4-26efc2f9-fb0d-4769-916b-3ffcd9d48131.svg" alt="区域对比图" style="width: 100%; height: 100%; object-fit: contain;">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 底部状态栏 -->
                <div class="status-bar">
                    <div class="status-info">
                        <div class="status-item">
                            <span class="status-label">系统状态：</span>
                            <span class="status-value success">运行正常</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">设备在线：</span>
                            <span class="status-value">186/192</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">最后更新：</span>
                            <span class="status-value">2023-11-28 15:30:45</span>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <div class="action-button">
                            <div class="button-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/19919154730f020-9431a973-f4e3-4150-b0ca-4122174755bd.svg');"></div>
                            <span>刷新数据</span>
                        </div>
                        <div class="action-button">
                            <div class="button-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/19919154730335e-22a2a164-ba96-4d65-a6e5-63cf9881c88f.svg');"></div>
                            <span>导出报告</span>
                        </div>
                        <div class="action-button">
                            <div class="button-icon" style="background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/19919154730e75a-b383258c-b729-4c4f-b558-da4208c6f79a.svg');"></div>
                            <span>设置</span>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 简单的交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 导航菜单切换
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    navItems.forEach(nav => nav.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 侧边栏子菜单切换
            const submenuItems = document.querySelectorAll('.submenu-item');
            submenuItems.forEach(item => {
                item.addEventListener('click', function() {
                    submenuItems.forEach(sub => sub.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 2D/3D 切换
            const toggleOptions = document.querySelectorAll('.toggle-option');
            toggleOptions.forEach(option => {
                option.addEventListener('click', function() {
                    toggleOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 图表标签切换
            const chartTabs = document.querySelectorAll('.chart-tab');
            chartTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    chartTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 刷新数据按钮
            const refreshButton = document.querySelector('.action-button');
            if (refreshButton) {
                refreshButton.addEventListener('click', function() {
                    alert('数据刷新中...');
                });
            }

            // 网格单元格点击事件
            const gridCells = document.querySelectorAll('.grid-cell');
            gridCells.forEach(cell => {
                cell.addEventListener('click', function() {
                    console.log('点击了网格单元格:', this.textContent);
                });
            });

            // 异常详情链接
            const detailLinks = document.querySelectorAll('.link');
            detailLinks.forEach(link => {
                link.addEventListener('click', function() {
                    alert('查看详情功能');
                });
            });
        });

        // 监听来自父窗口的消息（用于路由同步）
        window.addEventListener('message', function(event) {
            if (event.data.type === 'ROUTE_CHANGE') {
                const activeSection = event.data.activeSection;
                updateActiveSection(activeSection);
            }
        });

        // 根据路由更新活动状态
        function updateActiveSection(section) {
            // 清除所有活动状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelectorAll('.submenu-item').forEach(item => {
                item.classList.remove('active');
            });

            // 根据 section 设置对应的活动状态
            switch(section) {
                case 'overview':
                    document.querySelector('.nav-item').classList.add('active');
                    break;
                case 'realtime-status':
                    document.querySelector('.nav-item').classList.add('active');
                    document.querySelectorAll('.submenu-item')[0].classList.add('active');
                    break;
                case 'anomaly-stats':
                    document.querySelector('.nav-item').classList.add('active');
                    document.querySelectorAll('.submenu-item')[1].classList.add('active');
                    break;
                case 'history':
                    document.querySelector('.nav-item').classList.add('active');
                    document.querySelectorAll('.submenu-item')[2].classList.add('active');
                    break;
                case 'data-monitoring':
                    document.querySelectorAll('.nav-item')[1].classList.add('active');
                    break;
                case 'alert-management':
                    document.querySelectorAll('.nav-item')[2].classList.add('active');
                    break;
                case 'system-settings':
                    document.querySelectorAll('.nav-item')[3].classList.add('active');
                    break;
            }
        }

        // 模拟数据更新
        function updateData() {
            // 更新时间戳
            const timeElements = document.querySelectorAll('.status-value');
            if (timeElements.length > 2) {
                timeElements[2].textContent = new Date().toLocaleString('zh-CN');
            }
        }

        // 每30秒更新一次数据
        setInterval(updateData, 30000);
    </script>
</body>
</html>
